<template>
	<view class="content">
		<image class="top-bg" src="../../static/image/big-top-bg.png" mode="aspectFill"></image>
		<view class="title-btn-box r-nw-fs-c"
			:style="{'height':navBarHeight + 'px', 'marginTop': statusBarHeight + 'px'}">
			<image class="icon-back" src="../../static/image/back.png" mode="widthFix" @click="goToBack()">
			</image>
			<text class="page-title" style="width: 750rpx">订单详情</text>
		</view>
		<view class="unpaid-time">
			<view class="unpaid">
				{{orderDetail.status == 0 ? '待派单' : orderDetail.status == 1 ? '待交车' : '已完成'}} 
			</view>
		</view>
		<scroll-view class="scroll" scroll-y >
			<view class="basic-info-box">
				<view class="r-nw-sb-c">
					<view class="time-dec c-c-fs ellipsis">
						<text>{{orderDetail.order_car.name || ''}}</text>
						<text class="dec">{{orderDetail.order_car.describe || ''}}</text>
					</view>
					<image class="img" :src="orderDetail.order_car.cover" mode="aspectFit"></image>
				</view>
				<view class="address-box">
					<view class="address-title">
						取车地点
					</view>
					<view class="address">
						{{orderDetail.city || ''}} {{orderDetail.address || ''}}
					</view>
				</view>
				<view class="address-box times-total-num r-nw-sb-c">
					<view class="left">
						<view class="address-title">
							使用时间
						</view>
						<view class="times">
							{{orderDetail.start_date || ''}}—{{orderDetail.end_date || ''}}
						</view>
					</view>
					<view class="total-num c-c-c">
						共 {{orderDetail.day || 0}} 天
					</view>
				</view>
			</view>
			<view class="card-box">
				<view class="r-nw-fs-c">
					<image class="icon" src="../../static/image/user.png" mode="aspectFit"></image>
					<text class="title">租车人</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">姓名</text>
					<text class="text">{{orderDetail.order_lessee.name || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">电话</text>
					<text class="text">{{orderDetail.order_lessee.phone || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">身份证号</text>
					<text class="text">{{orderDetail.order_lessee.id_card || ''}}</text>
				</view>
			</view>
			<view class="card-box">
				<view class="r-nw-fs-c">
					<image class="icon" src="../../static/image/out.png" mode="aspectFit"></image>
					<text class="title">出行保障</text>
				</view>
				<view class="insurance-box c-c-fs" :style="{color: detailInfo.order_insurance.level == 1 ? '#09B8A9' : detailInfo.order_insurance.level == 2 ? '#E5820B' : '#EC2F12' }">{{orderDetail.order_insurance.name}}</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">车损</text>
					<text class="text">{{orderDetail.order_insurance.car_damage || ''}} {{orderDetail.order_insurance.car_damage_sub || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">三者总额</text>
					<text class="text">{{orderDetail.order_insurance.tripartite || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">乘客保障</text>
					<text class="text">{{orderDetail.order_insurance.passenger || ''}}</text>
				</view>
			</view>
			<view class="card-box">
				<view class="r-nw-fs-c">
					<image class="icon" src="../../static/image/order-icon.png" mode="aspectFit"></image>
					<text class="title">订单信息</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">订单号</text>
					<text class="text">{{orderDetail.no || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">下单时间</text>
					<text class="text">{{orderDetail.date || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c" v-if="orderDetail.pay_date">
					<text class="explain">支付时间</text>
					<text class="text">{{orderDetail.pay_date || ''}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="btns r-nw-sb-c" v-if="orderDetail.status == 0">
			<view class="cancel c-c-c" @click="goToBack">
				返回
			</view>
			<view class="pay-btn c-c-c" @click="isPopup = true;">
				派单
			</view>
		</view>
		<view class="btns c-c-c" v-else>
			<view class="cancel-btn cancel c-c-c" @click="goToBack">
				返回
			</view>
		</view>
		<view class="popup c-c-c" v-if="isPopup">
			<view class="card-box">
				<view class="title c-c-c">选择员工</view>
				<view class="r-nw-c-c" style="margin-top: 30rpx;">
					员工： <uni-data-select
					class="select"
						  v-model="staffsId"
						  :localdata="staffsList"
						></uni-data-select>
				</view>
				<view class="btns-box r-nw-sb-c">
					<view class="btn cancel c-c-c" @click="isPopup = false">
						取消
					</view>
					<view class="btn comfirm c-c-c" @click="comfirm">
						确定派单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { delivery, ordersDetail, staffs, assignStaff } from "@/utils/api.js";
	const app = getApp();
	export default {
		data() {
			return {
				navBarHeight: app.globalData.navBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				orderId: '',
				orderDetail: {},
				isPopup: false,
				staffsList: [],
				staffsId: ''
			}
		},
		onLoad(option) {
			this.orderId = option?.id;
			this.getDetailInfo();
			this.getStaffs();
		},
		methods: {
			// 取消
			goToBack() {
				uni.navigateBack();
			},
			// 获取详情信息
			getDetailInfo() {
				uni.showLoading({title: '加载中...'});
				ordersDetail(this.orderId).then( res=> {
					if(res.code === 200) {
						this.orderDetail = res.data;
						uni.hideLoading();
					}
				})
			},
			// 确认派单
			comfirm() {
				if(!this.staffsId) {
					uni.showToast({
						icon: 'none',
						title: '请选择员工',
					})
					return
				}
				let data = {
					id: this.orderId,
					staff_id: this.staffsId
				}
				assignStaff(data).then(res => {
					if(res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '分配成功'
						})
						this.isPopup = false;
						this.getDetailInfo();
					}
				})
			},
			// 员工列表
			getStaffs() {
				uni.showLoading({
					title:'加载中...'
				})
				staffs().then(res => {
					if(res.code === 200) {
						uni.hideLoading();
						this.staffsList = res.data.list.map(item => ({
							value: item.id,
							text: item.name
						 }))
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}
	.page-title {
		width: 100%;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		letter-spacing: 1px;
		text-align: center;
	}
	.icon-back {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
	}
	.card-box {
		margin: 22rpx auto 0;
		padding: 32rpx 24rpx;
		width: 638rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		.icon {
			width: 36rpx;
			height: 36rpx;
		}
		.title {
			margin-left: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
		}
		.explain-text {
			margin-top: 32rpx;
			.explain {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
		.insurance-box {
			margin-top: 26rpx;
			width: 638rpx;
			height: 88rpx;
			background: linear-gradient( 90deg, #FFF7F7 0%, #FFFFFF 100%);
			border-radius: 16rpx 8rpx 0rpx 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #EC2F12;
			line-height: 40rpx;
		}
	}
	.content {
		height: 100vh;
		position: relative;
		.top-bg {
			width: 750rpx;
			height: 716rpx;
		}
		.title-btn-box {
			position: absolute;
			top: 0;
			z-index: 99;
		}
		.unpaid-time {
			position: absolute;
			top: 180rpx;
			left: 53rpx;
			z-index: 99;
			.unpaid {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}
		}
		.scroll {
			position: absolute;
			top: 286rpx;
			bottom: 160rpx;
			z-index: 99;
			.basic-info-box {
				margin: 32rpx auto 0;
				padding: 32rpx;
				width: 622rpx;
				border-radius: 24rpx;
				background-color: #FFFFFF;
				.time-dec {
					width: 380rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					.dec {
						display: inline-block;
						margin-top: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 24rpx;
					}
				}
				.img {
					width: 219rpx;
					height: 150rpx;
					flex-shrink: 0;
				}
				.address-box {
					margin-top: 34rpx;
					padding: 32rpx 0;
					border-top: 2rpx solid #F5F5F5;
					border-bottom: 2rpx solid #F5F5F5;
					.address-title {
						font-size: 24rpx;
						color: #666;
					}
					.address {
						margin-top: 17rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
					}
				}
				.times-total-num {
					margin-top: 0;
					border: 0;
					padding-bottom: 0;
					.times {
						margin-top: 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						line-height: 36rpx;
					}
					.total-num {
						width: 110rpx;
						height: 48rpx;
						background: #FFE9C6;
						border-radius: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-size: 26rpx;
						color: #783700;
						line-height: 40rpx;
					}
				}
			}
		}
		.popup {
			position: fixed;
			z-index: 999;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .3);
			.title {
				margin-top: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}
			.card-box {
				padding: 30rpx;
				width: 450rpx;
				height: 300rpx;
				background-color: #fff;
				border-radius: 30rpx;
				margin: 0;
				.select {
					width: 350rpx;
				}
				.btns-box {
					margin-top: 50rpx;
					.btn {
						width: 150rpx;
						height: 60rpx;
						border-radius: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						line-height: 28rpx;
					}
					.cancel {
						border: 2rpx solid #999;
						color: #666;
					}
					.comfirm {
						border: 2rpx solid #EC2F12;
						color: #FF0E25;
					}
				}
			}
		}
	}
	.btns {
		padding: 0 24rpx 16rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 702rpx;
		height: 120rpx;
		background: #FFFFFF;
		.cancel-btn {
			width: 702rpx !important;
		}
		.cancel {
			width: 200rpx;
			height: 88rpx;
			background: #FCFBFC;
			border-radius: 16rpx;
			border: 2rpx solid #E5E6E5;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}
		.pay-btn {
			width: 484rpx;
			height: 88rpx;
			background: linear-gradient( 270deg, #FF7F00 0%, #FF3735 100%);
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}
	}
</style>